window.addEventListener('load',function(){
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    //鼠标经过 显示隐藏左右按钮
    focus.addEventListener('mouseenter', function(){
        arrow_l.style.display ='block';
        arrow_r.style.display ='block';
        clearInterval(timer);
        timer=null;
    })
    focus.addEventListener('mouseleave', function(){
        arrow_l.style.display ='none';
        arrow_r.style.display ='none';
        timer = setInterval(function(){
            arrow_r.click()
        },2000);
    });
    var ul =focus.querySelector('ul');
    var ol =focus.querySelector('.circle');
    for(var i =0; i< ul.children.length; i++){
        var li = document.createElement('li');
        //记录当前圆圈的索引号 通过自定义属性设置
        li.setAttribute('index',i);
        ol.appendChild(li);
        //用排他思想来设置小圆圈，同时设置点击事件
        li.addEventListener('click',function(){
            for(var i =0; i< ol.children.length; i++){
                ol.children[i].className ='';
            }
            this.className = 'current';
            //点击圆圈 移动图片 移动的是ul
            //ul的移动距离就是 圆圈的索引号 x 图片的宽度，往右往左所以是负值
            //当点击某个li 就拿到点击的li的索引号
            var index = this.getAttribute('index');
            //当点击某个li，就能获取li的索引号到num
            num = index;
            circle = index;
            console.log(focusWidth);
            console.log(index);
            animate(ul, -index * focusWidth);
        })
    }
    ol.children[0].className = 'current';
    //克隆第一张图片到最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    var num = 0;
    var circle =0;
    var flag = null;
    arrow_r.addEventListener('click',function(){
        if(flag){
            flag =false;
            if(num== ul.children.length-1) {
                ul.style.left =0;
                num=0;
            }
            num++;
            animate(ul, -num * focusWidth ,function(){
                flag = true;
            });
            circle++;
            if(circle ==ol.children.length){
                circle =0 ;
            }
            circleChange()
            
        }
        })
        
        //如果走到最后一张复制的图片，，ul要快速复原left为0
        
    arrow_l.addEventListener('click',function(){
        if(flag){
            flag =false;
        
        
        //如果走到最后一张复制的图片，，ul要快速复原left为0
        if(num== 0) {
            num=ul.children.length-1;
            ul.style.left =-num*focusWidth + 'px';
            
        }
        num--;
        animate(ul, -num * focusWidth , function(){
            flag =ture;
        });
        circle--;
        if(circle <0){
            circle ==ol.children.length-1 ;
        }
        circleChange()
    }
        

    })

    function circleChange(){
        for(var i =0; ol.children.length; i++){
            ol.children[i].className ='';
        }
        ol.children[circle].className ='current';
    }
    var timer = setInterval(function(){
        arrow_r.click()
    },2000)
})